<template>
    <div class="main">
      <p  class="main_text">厂家档次设置</p>

        <!-- #################################### 查询 #################################### -->
        <div class="main_nav p20">
            <el-form :model="searchData" class="df ">
                <el-form-item label="规则名称：" class="mr20" style="width: 20%;">
                    <el-input v-model="searchData.companyName" placeholder="规则名称：" />
                </el-form-item>
                <el-form-item label="积分类型：" class="mr20" style="width: 20%;">
                    <el-input v-model="searchData.companyName" placeholder="积分类型：" />
                </el-form-item>
                <el-form-item label="是否启用：" class="mr20" style="width: 20%;">
                    <el-input v-model="searchData.companyName" placeholder="是否启用：" />
                </el-form-item>
                <el-form-item style="width: 20%;">
                    <div class="df">
                        <el-button type="primary" @click="searchDataBtn">查询</el-button>
                        <el-button type="primary" plain @click="resc">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- #################################### 表单 #################################### -->
        <div class="cyr-flex mt20">
          <div class="mb20">
            <el-button type="primary" @click="addFormDialogVisible = true">新增档次</el-button>
          </div>
          <div class="cyr-flex-box">
            <el-table :data="tableData"  :header-cell-style="{ background: '#f0f6fe' }"
               border  v-adaptive>
                <el-table-column label="编号" prop="id" width="60" />
                <el-table-column label="档级名字" prop="name" align="center" />
                <el-table-column label="档次内容（配件）">
                    <template #default="props">
                        累计上架满 {{ props.row.fittingNumber }} 件
                    </template>
                </el-table-column>
                <el-table-column label="档次内容（整车）">
                    <template #default="props">
                        累计上架满 {{ props.row.carNumber }} 件
                    </template>
                </el-table-column>
                <el-table-column label="试用时间">
                    <template #default="props">
                        {{ props.row.trialDuration }} 天
                    </template>
                </el-table-column>
                <el-table-column label="是否启用" width="120">
                    <template #default="props">
                        <el-switch v-model="props.row.state" :active-value='0' :inactive-value='1'
                            @change="changeState(props.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" prop="updatedAt" />
                <el-table-column label="操作" width="120">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="editBtn(props.row)">编辑</el-button>
                        <el-button size="small" link type="danger" @click="delBtn(props.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-------------------------------------------------- 分页 -------------------------------------------------->
          <smartPager
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="Number(total)"
            @change="handleCurrentChange" />
          </div>
            <!-------------------------------------------------- 添加 -------------------------------------------------->
            <el-dialog v-model="addFormDialogVisible" width="40%" align-center @close="closeAddForm">
                <template #header>
                    <div class="df aic">
                        <el-icon style="color: #fff;" size="20">
                            <Edit />
                        </el-icon>&nbsp;
                        <p style="color: #fff;">新增档次</p>
                    </div>
                </template>
                <el-form :model="addData" label-width="120" label-position="left" class="df fdc aic">
                    <el-form-item label="档级名字：" style="width: 60%;">
                        <el-input v-model="addData.name" />
                    </el-form-item>
                    <el-form-item label="整车上架数量：" style="width: 60%;">
                        <el-input-number v-model="addData.carNumber" :step="5" />
                    </el-form-item>
                    <el-form-item label="配件上架数量：" style="width: 60%;">
                        <el-input-number v-model="addData.fittingNumber" :step="5" />
                    </el-form-item>
                    <el-form-item label="是否启用：" style="width: 60%;">
                        <el-switch v-model="addData.state" :active-value='0' :inactive-value='1' />
                    </el-form-item>
                    <el-form-item label="有效时间：" style="width: 60%;">
                        <el-input v-model="addData.trialDuration" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button type="primary" plain @click="addFormDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addSaveBtn" :disabled="loading">添加</el-button>
                </template>
            </el-dialog>
            <!-------------------------------------------------- 编辑 -------------------------------------------------->
            <el-dialog v-model="editFormDialogVisible" width="40%" align-center @close="closeEditForm">
                <template #header>
                    <div class="df aic">
                        <el-icon style="color: #fff;" size="20">
                            <Edit />
                        </el-icon>&nbsp;
                        <p style="color: #fff;"> </p>
                    </div>
                </template>
                <el-form :model="editData" label-width="120" label-position="left" class="df fdc aic">
                    <el-form-item label="档级名字：" style="width: 60%;">
                        <el-input v-model="editData.name" />
                    </el-form-item>
                    <el-form-item label="整车上架数量：" style="width: 60%;">
                        <el-input-number v-model="editData.carNumber" :step="5" />
                    </el-form-item>
                    <el-form-item label="配件上架数量：" style="width: 60%;">
                        <el-input-number v-model="editData.fittingNumber" :step="5" />
                    </el-form-item>
                    <el-form-item label="是否启用：" style="width: 60%;">
                        <el-switch v-model="editData.state" :active-value='0' :inactive-value='1' />
                    </el-form-item>
                    <el-form-item label="有效时间：" style="width: 60%;">
                        <el-input v-model="editData.trialDuration" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button type="primary" plain @click="editFormDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="editSaveBtn" :disabled="loading">保存</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RequestTryLevelGetlistlimit, RequestTryLevelSave, RequestTryLevelDeleteList } from '@/api/path/index.js'
import { ElMessage } from 'element-plus'
import { Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'

const addFormDialogVisible = ref<any>(false)
const editFormDialogVisible = ref<any>(false)
const searchData = ref<any>({
    value1: '',
    resource: '',
    name: '',
})
/*---------------------------------- 查询 ----------------------------------*/
const searchDataBtn = () => {
    getData()
}
const resc = () => { }
/*---------------------------------- 分页获取数据 ----------------------------------*/
const tableData = ref([])
const total = ref<any>(0)
const currentPage = ref(1)
const pageSize = ref(10)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    getData()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    getData()
}
const getData = () => {
    RequestTryLevelGetlistlimit({
        page: currentPage.value,
        rows: pageSize.value,
    }).then((res: any) => {
        total.value = res.resultObj.total
        tableData.value = res.resultObj.data
    })
}
getData()
/*------------------------ 启用停用 ------------------------*/
const changeState = (e: any) => {
    console.log(e);
}
/*------------------------ 编辑 ------------------------*/
const editData = ref<any>({})
const editBtn = (e: any) => {
    editData.value.fittingNumber = e.fittingNumber
    editData.value.carNumber = e.carNumber
    editData.value.state = e.state
    editData.value.name = e.name
    editData.value.trialDuration = e.trialDuration
    editData.value.id = e.id
    editFormDialogVisible.value = true
}
const editSaveBtn = () => {
    loading.value = true
    RequestTryLevelSave(editData.value).then((res: any) => {
        if (res.success == true) {
            getData()
            loading.value = false
            editFormDialogVisible.value = false
            ElMessage.success(res.msg)
        } else {
            loading.value = false
            ElMessage.error(res.msg)
        }
    })
}
/*------------------------ 添加 ------------------------*/
const addData = ref({
    fittingNumber: 200,
    carNumber: 50,
    state: 0,   //0-启用 1-停用
    name: null,
    trialDuration: 90 //传有效时间单位天
})
const loading = ref(false)
const addSaveBtn = () => {
    loading.value = true
    RequestTryLevelSave(addData.value).then((res: any) => {
        if (res.success == true) {
            getData()
            loading.value = false
            addFormDialogVisible.value = false
            ElMessage.success(res.msg)
        } else {
            loading.value = false
            ElMessage.error(res.msg)
        }
    })
}
// 关闭弹窗清空数据
const closeAddForm = () => {
    addData.value.fittingNumber = 200
    addData.value.carNumber = 50
    addData.value.state = 0
    addData.value.name = null
    addData.value.trialDuration = 90
}
/*------------------------ 删除 ------------------------*/
const delBtn = (e: any) => {
    const ids = ref<any>()
    ids.value = [e.id]
    const formimgs = new FormData()
    formimgs.append('ids', ids.value)
    RequestTryLevelDeleteList(formimgs).then((res: any) => {
        if (res.success == true) {
            ElMessage.success(res.msg)
            getData()
        } else {
            ElMessage.success(res.msg)
        }
    })
}
</script>

<style scoped lang="scss">
.main {
    width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
    .main_nav {
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;

        .drawerText {
            font-size: 1.125rem;
            font-weight: 700;
        }
    }

    :deep(.el-overlay .el-icon svg) {
        color: black;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;

        .el-icon svg {
            color: #fff !important;
        }

        .el-dialog__title {
            color: #fff;
        }
    }


}
</style>
